<template>
  <div class="weekend">
    <div class="weekend-title">周末去哪儿</div>
    <ul>
      <li class="weekend-item border-bottom" v-for="item in list" :key="item.id">
        <div class="weekend-img-wapper">
          <img class="weekend-img" :src="item.imgUrl" alt />
        </div>
        <div class="weekend-info">
          <p class="weekend-head">{{item.head}}</p>
          <p class="weekend-desc">{{item.desc}}</p>
          <!-- <button class="weekend-btn">查看详情</button> -->
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "HomeWeekend",
  props: {
    list: Array
  }
  // data() {
  //   return {
  //     weekendList: [
  //       {
  //         id: "001",
  //         imgUrl:
  //           "//imgs.qunarzz.com/vs_ceph_vs_tts/6b783e13-44fc-4e54-81e0-183a78ac7b75.jpg_r_480x320x90_87f69773.jpg",
  //         head: "大连圣亚海洋世界",
  //         desc: "浪漫大连首战,浪漫的海洋主题乐园"
  //       },
  //       {
  //         id: "002",
  //         imgUrl:
  //           "//imgs.qunarzz.com/vs_ceph_vs_tts/6b783e13-44fc-4e54-81e0-183a78ac7b75.jpg_r_480x320x90_87f69773.jpg",
  //         head: "大连圣亚海洋世界",
  //         desc: "浪漫大连首战,浪漫的海洋主题乐园"
  //       },
  //       {
  //         id: "003",
  //         imgUrl:
  //           "//imgs.qunarzz.com/vs_ceph_vs_tts/6b783e13-44fc-4e54-81e0-183a78ac7b75.jpg_r_480x320x90_87f69773.jpg",
  //         head: "大连圣亚海洋世界",
  //         desc: "浪漫大连首战,浪漫的海洋主题乐园"
  //       }
  //     ]
  //   };
  // }
};
</script>

<style lang='less' scoped>
.weekend-title {
  margin-bottom: 0.1rem;
  margin-top: 0.1rem;
  background: #eee;
  line-height: 0.8rem;
  text-indent: 0.2rem;
}
.weekend-item {
  margin-bottom: 0.2rem;
  .weekend-img-wapper {
    overflow: hidden;
    height: 0;
    padding-bottom: 37.09%;
    .weekend-img {
      width: 100%;
    }
  }
  .weekend-info {
    //   flex: 1;
    //   min-width: 0;
      padding: 0.1rem;
    .weekend-head {
      line-height: 0.54rem;
      font-size: 0.32rem;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .weekend-desc {
      line-height: 0.4rem;
      color: #ccc;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      padding-bottom: .2rem;
    }
  }
}
</style>
